import { useRef, useState } from "react";

export default function StudyUseRef() {
	const inputRef = useRef<HTMLInputElement>(null); // 用于引用 DOM 元素
	const focusInput = () => {
		if (inputRef.current) {
			inputRef.current.focus(); // 使用 ref 获取输入框并聚焦
		}
	};

	const [count, setCount] = useState(0);
	const countRef = useRef(count); // 用来存储计数的值，但不会触发重新渲染
	const intervalRef = useRef<any>(null); // 用来存储定时器的引用

	const startTimer = () => {
		intervalRef.current = setInterval(() => {
			countRef.current += 1; // 修改的是 ref 而不是 state，因此不会重新渲染
			console.log("Count :", countRef.current);
		}, 1000);
	};
	const stopTimer = () => {
		clearInterval(intervalRef.current);
	};

	const updateState = () => {
		setCount(countRef.current); // 手动将 ref 中的值更新到 state 中，触发重新渲染
	};

	return (
		<div>
			<h2>Study UseRef</h2>
			<input ref={inputRef} type="text" placeholder="点击按钮" />
			<button onClick={focusInput}>输入框聚焦</button>

			<p>Count: {count}</p>
			<button onClick={startTimer}>Start Timer</button>
			<button onClick={stopTimer}>Stop Timer</button>
			<button onClick={updateState}>Update State</button>
		</div>
	);
}
